Documentation by “Ansonika” v1.2

“MAVIA - HTML Site template”

Created: 08 June 2017
Last update: 16 April 2018
By: Ansonika

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please post a comment on item page. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files, Structure and basic modifications
  3. PHP contact form, newsltetter form and plan a visit form
  4. JavaScript
  5. Sources and Credit
  6. UPDATES

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap framework grid. It's ULTRA RESPONSIVE!!
very type of company can create Registration, Reservation, Questionare or Reviews Wizard in order to catch new potential customers and usefull data like contacts, trends, answers or requests. It comes with nice UI/UX form elements design: radio, checkbox, select. The results will be sent via email and confirmation email is sent to the user who fill the form. At the moment comes with 4 demo versions with 4 different color schemes.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Home
- 2.2 About
- 2.3 Wizard quote
- 2.4 Contact
- 2.5 Success submit
- 2.6 Shortcodes

3. COMMON
- 3.1 Accordion
- 3.2 Spacing
- 3.3 Owl carousel

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 35px). Below how is coded

LOGO HOME VERSION WITH H1

Color schemes
The item comes with 4 premade color schemes:

Just simply add the color scheme css file as last css in order to override the default
color, like the example below.

<!-- BASE CSS -->
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/icon_fonts/css/all_icons_min.css" rel="stylesheet">
<link href="css/skins/square/grey.css" rel="stylesheet">
	
<!-- COLOR CSS -->
<link href="css/color_3.css" rel="stylesheet">

Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address. You can change also your map marker (that has to be png24).

//set up markers 
		var myMarkers = {"markers": [
				{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker.png"}
			]
		};
		
		//set up map options
		$("#map").mapmarker({
			zoom	: 14,
			center	: 'Covent Garden London', //YOUR FULL ADDRESS 
			markers	: myMarkers
		});
COMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)
In some cases Google require an api key for the Google map.

You can create your own "Standard api key" here 
by clicking on "GET KEY" BUTTON (on Authentication for the standard API—API keys section), 
and follow the steps.
https://developers.google.com/maps/documentation/javascript/get-api-key#key

Here some additionale info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/

Then replace at the bottom of every page that use Google map, this line

<script src="http://maps.googleapis.com/maps/api/js"></script> OR 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

with your api key included, like the example below
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>


NOTE: if you apply an api key, the map locally does not load. You must upload your site.

Add one more step to the wizard
Each step is defined by a div, so simply duplicate one of them. Below an example of the structure:

<div class="step">
	your content....                
</div><!-- end step-->

Make an input field, select or radio/checkbox required or not.
Simply add or remove the class "required" to the element. To change the error message go to js/common_script.js and under the section jQuery Validation Plugin at line 8812 aprox, then recreate the minfied version.

Add one more questions with checkbox answer
Open the HTML page. As you can see the name of the input has to be the same with at the end [], each one have a different value. in the example below we add 2 more checkbox questions: 

<h3>Question?</h3> 

<div class="form-group radio_input">
<label>
<input type="checkbox" value="Professional" name="question_3[]" class="icheck required">Professional
</label>
</div>

<div class="form-group radio_input">
<label>
<input type="checkbox" value="Graduated" name="question_3[]" class="icheck required">Graduated
</label>
</div>

$message .= "\n3) Question?\n" ;
foreach($_POST['question_3'] as $value) 
{ 
	$message .=   "- " .  trim(stripslashes($value)) . "\n"; 
};

Antispam protection:
spam bots usually disable javascripts to avoid the jquery validation or automatically fill all the input fields and send the email. Now the php submission script link is removed from the html and placed inside the the js script. So if the js will be disabled, the form will be not processed. The js script check also if the hidden input field (id website) is filled by the spam bot...if filled the form will be not processed. 

LEAVE THE HIDDEN INPUT FIELD WEBSITE for the reason above
<input id="website" name="website" type="text" value="">

THE GRID
Please refer to this documentation Boostrap


C) PHP files - top

Below the code of the php file that process the wizard data and send the email.

If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication)
3) If your sender email has to be the same from your hosting provider

Main settings:
1) $to = change with your email address
2) Edit the text as you need (\n is equal to a br)
3) DelayRedirect on body tag = increse the value to get more delay on the redirect page
4) window.location = "your redirect page"

SMTP version
SMTP version depends by your hosting settings, we suggest to test the smtp send email version before to customize the item. It is a bit more advanced and complex to set than the default mail send. 

HOW TO SET THE SMTP VERSION SEND EMAIL:
1) First choose the wizard page version
2) On footer page change the link path for the corresponding func: 
example > <script src="js/registration_wizard_func.js"></script> 
becomes <script src="js/smtp/registration_wizard_func.js"></script>
3) Edit the corresponding php file in the smtp folder following the comments on code.

Note that the contact form works a little bit different. Edit the file in the assets folder following the documentation.

D) JavaScript - top

This theme use these Javascript (minified versions included). i've included all the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder).

common_scripts.js content:

E) Sources and Credits - top

I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.

Images are not included.

A) UPDATES - top

Version 1.2 16 April 2018

HOW TO UPDATED FROM PREVIOUS VERSION

1) Update to Bootstrap 4
a) Update the following files: css/bootstrap.css, css/bootstrap.min.css, css/style.css, css/menu.css, 
js/bootstrap.js, js/bootstrap.min.js, js/common_scripts.js, js/common_scripts_min.js
b) Update some classes in the html. Unfortunately there's no easy way to update the theme to BS4 other 
than doing it manually. The differences, mainly in the grid system (and modal) are explained in this link . 
We suggest to use this tool https://www.diffchecker.com/ and compare the html files with the new ones.
Should it takes 10 minutes.

2) Update Jquery Version on footer

3) Update js/common_scripts.js, js/common_scripts_min.js

4) Update js/registration_wizard_func.js, js/reservation_wizard_func.js, js/review_wizard_func.js, 
js/questionaier_wizard_func.js, + css/style.css

NOTE: Rating input names for review version has been changed in the html code and in the php file

Version 1.1 18 October 2017

HOW TO UPDATE FROM PREVIOUS VERSIONS (or directly update style.css+resposnive.css)
1) Open css/style.css and update this class aprox line 692

.styled-select {
	width: 100%;
	overflow: hidden;
	height: 44px;
	box-sizing: border-box;
	line-height: 1px!important;
	background: #fff url(../img/arrow_down.svg) no-repeat right center;
	border: 0;
	border-bottom: 2px solid #e8ebed;
	border-radius: 0;
}

2) Open css/style.css and update these classes aprox line 260+266/318

#social ul {
	margin: 0 10px 0 0;
	padding: 0 0 0 0;
	text-align: center;
}

#social ul li {
	float: left;
	margin: 0 5px 10px 0;
	list-style: none;
}

footer ul li{
	float: left;
	margin-right: 15px;
	list-style: none;
}

3) Open css/responsive.css and move this class aprox line 20 inside the @media (max-width: 767px)

#form_container .row > [class*='col-'] {
		padding-left: 0 !important;
    	padding-right: 0 !important;
	}

Maybe you are interested in




Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or submit a comment on item page. You will receive an answer within 24-48 hours (working days) GMT +1.

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify:

Ansonika

Go To Table of Contents